<template>
    <div class="w-full h-full grid grid-rows-[minmax(134px,1fr)_minmax(236px,1fr)_minmax(554px,1fr)] gap-[20px]">
        <box title="建筑信息">
            <div class="p-[16px]">
                <div class="gradient-text text-[20px] font-bold pb-[16px]">{{ isNullOrEmpty( useDataDashboardThemeStore?.building?.buildingInfo?.buildingInfo?.buildingName ) }}</div>
                <div class="text-[14px] flex ">
                    <img class="w-[16px] h-[16px] pr-[6px]" src="@/assets/screenimg/unit.png" />
                    位置描述：{{ isNullOrEmpty( useDataDashboardThemeStore?.building?.buildingInfo?.buildingInfo?.place ) }}
                </div>
            </div>
        </box>
        <box title="设备概况">
            <div class="py-[40px] px-[36px]">
                <div class="flex justify-between">
                    <div v-for="(item, index) in equipmentList" :key="index">
                        <div class="flex">
                            <div class="w-[13px] h-[13px] pr-[8px]">
                                <img class="w-[13px] h-[13px]" :src="item.img" alt="">
                            </div>
                            <div class="alltext">
                                {{ isNullOrEmpty( item.name ) }}
                            </div>
                        </div>
                        <div class="number title ml-[20px] pt-[12px]">
                            <div v-if="item.number <= 999"> {{ isNullOrEmpty( item.number ) }}</div>
                            <div v-else>999+</div>
                        </div>
                    </div>
                </div>
                <div class="pt-[32px]">
                    <div class="flex justify-between">
                        <div v-for="(item, index) in equipmentList2" :key="index">
                            <div class="flex items-center">
                                <div class="w-[6px] h-[6px] rounded-[50%] mr-[8px]">
                                    <div class="w-[6px] h-[6px] rounded-[50%] "
                                        :class="item.id == 1 ? 'bg-[#FF802B]' : item.id == 2 ? 'bg-[#B4B4B4]' : item.id == 3 ? 'bg-[#FA1C1A]' : 'bg-[#21CC31]'">
                                    </div>
                                </div>
                                <div class="alltext">
                                    {{ isNullOrEmpty( item.name ) }}
                                </div>
                            </div>
                            <div class="number title pl-[14px] pt-[12px]">
                                <div v-if="item.number <= 999"> {{ isNullOrEmpty( item.number ) }}</div>
                                <div v-else>999+</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </box>
        <box title="设备列表">
            <div class="p-[16px] flex flex-col gap-[16px] h-full">
                <div class="flex-1">
                    <!--  @click="active = item.deviceId" -->
                  <div v-if="tableData.data.length != 0" class="w-[100%]  py-[16px] pl-[16px] h-[142px] cursor-pointer mb-[5px]"
                       v-for="(item, index) in tableData.data" :class="active == item.deviceId ? 'listbgc' : 'listbgc1'"
                      >
                    <div class="flex justify-between">
                      <div class="text-[16px] leading-[16px] h-[16px] relative ">{{ isNullOrEmpty( item?.deviceName ) }}
                        <div class="absolute bottom-[-3px] w-[100%] h-[5px] left-0 opacity-[0.5] bg-[#4583FF]">
                        </div>
                      </div>
                      <div class="w-[70px] h-[32px] flex justify-center text-[16px] items-center"
                           :class="item?.commStatus == '1' ? 'listbg1' : item?.commStatus == '2' ? 'listbg2' : item?.commStatus == '3' ? 'listbg3' : 'listbg'">
                        {{ isNullOrEmpty( ALARMTYPES[item?.commStatus]?.label ?? '正常' ) }}
                      </div>
                    </div>
                    <div class="flex mt-[5px] gap-[22px]">
                      <div class="text-[14px] text-[#D6D6D6]">设备序列号</div>
                      <div class="text-[14px] flex-1 text-[#ffffff] ml-[0px]">{{ isNullOrEmpty( item?.deviceSN ) }}</div>
                    </div>
                    <div class="flex mt-[16px] gap-[22px]">
                      <div class="text-[14px] text-[#D6D6D6]">告警信息</div>
                      <div class="text-[14px] flex-1 text-[#ffffff] ml-[20px]">{{ isNullOrEmpty( item?.alarmTitle ) }}</div>
                    </div>
                    <div class="flex mt-[16px] gap-[22px]">
                      <div class="text-[14px] text-[#D6D6D6]">位置信息</div>
                      <div class="text-[14px] flex-1 text-[#ffffff] ml-[10px]">{{ item?.buildingName
                      + item?.drawingName }}</div>
                    </div>
                  </div>

                  <nullpng v-else />
                </div>
                <div class="absolute right-[20px]  bottom-0  h-[59px] flex justify-center items-center w-[100%]">
                    <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit"
                        background :layout="PAGE_LAYOUTLEFT" :total="tableData.total" @size-change="getTableList"
                        size="small" style="color: #fff;" @current-change="getTableList" :pager-count="3"  />
                </div>
            </div>
        </box>
    </div>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import nullpng from '@/views/large-data-screen/menu-content/null-png.vue'
import { PAGE_LAYOUTLEFT } from "@/constant";
import { ALARMTYPES } from "@/constant/alarm-mangenment";
import box from '../../component/box.vue'
import img1 from '@/assets/screenimg/unity1.png';
import img2 from '@/assets/screenimg/unity3.png';
import img3 from '@/assets/screenimg/unity2.png';
import { useDataDashboardThemeStoreHook } from '@/store/modules/data-dashboard-theme'
import { getDeviceList, getDeviceOverview } from "@/api/screen";
const useDataDashboardThemeStore = useDataDashboardThemeStoreHook()
const buildingInfo = ref(useDataDashboardThemeStore?.building?.buildingInfo?.buildingInfo)
const active = ref(0)
const equipmentList = ref([
    {
        name: '设备总数',
        id: 1,
        img: img1,
        number: 0
    },
    {
        name: '即将到期',
        id: 2,
        img: img2,
        number: 0
    },
    {
        name: '已到期',
        id: 3,
        img: img3,
        number: 0
    }
])
const equipmentList2 = ref([
    {
        name: '故障设备',
        id: 1,
        img: '',
        number: 0
    },
    {
        name: '离线设备',
        id: 2,
        img: '',
        number: 0
    },
    {
        name: '告警设备',
        id: 3,
        img: '',
        number: 0
    },
    {
        name: '正常设备',
        id: 4,
        img: '',
        number: 0
    }
])
const tableData = reactive({
    data: [],
    total: 0
});
const searchFrom = ref({
    buildingId: useDataDashboardThemeStore?.building?.buildingInfo?.buildingInfo?.buildingId,
    drawingId: useDataDashboardThemeStore?.building?.checkedDrawingId,
    page: 1,
    limit: 3
});
const getTableList = () => {
    getDeviceList(searchFrom.value).then(res => {
        // console.log("获取楼层",res);
        tableData.total = res.result.total
        console.log("获取楼层",res.result.total);
        tableData.data = res.result.data
    })
}
onMounted(() => {
    getDeviceOverview({ 
        buildingId: useDataDashboardThemeStore?.building?.buildingInfo?.buildingInfo?.buildingId,
        drawingId:useDataDashboardThemeStore.drawmapid       }).then(res => {
        // console.log('楼层id',useDataDashboardThemeStore.drawmapid);
        equipmentList.value[0].number = res.result.total
        equipmentList.value[1].number = res.result.expire
        equipmentList.value[2].number = res.result.expired
        equipmentList2.value[0].number = res.result.fault
        equipmentList2.value[1].number = res.result.offLine
        equipmentList2.value[2].number = res.result.alarm
        equipmentList2.value[3].number = res.result.normal
    })
})
watch(() => useDataDashboardThemeStore?.building, () => {
    if (useDataDashboardThemeStore?.building?.buildingInfo?.buildingInfo?.buildingId && useDataDashboardThemeStore?.building?.checkedDrawingId) {
        searchFrom.value.buildingId = useDataDashboardThemeStore?.building?.buildingInfo?.buildingInfo?.buildingId
        searchFrom.value.drawingId = useDataDashboardThemeStore?.building?.checkedDrawingId
        getTableList()
    }
}, {
    immediate: true,
    deep: true
})

watch(() => useDataDashboardThemeStore?.drawmapid, () => {
    getDeviceOverview({ 
        buildingId: useDataDashboardThemeStore?.building?.buildingInfo?.buildingInfo?.buildingId,
        drawingId:useDataDashboardThemeStore.drawmapid       }).then(res => {
        // console.log('楼层id',useDataDashboardThemeStore.drawmapid);
        equipmentList.value[0].number = res.result.total
        equipmentList.value[1].number = res.result.expire
        equipmentList.value[2].number = res.result.expired
        equipmentList2.value[0].number = res.result.fault
        equipmentList2.value[1].number = res.result.offLine
        equipmentList2.value[2].number = res.result.alarm
        equipmentList2.value[3].number = res.result.normal
    })
}, {
    immediate: true,
    deep: true
})
</script>
<style lang="scss" scoped>
.bgactive {
    background: linear-gradient(0deg, #24293F, #1C4597);
    border-radius: 5px;
}

.listbg {
    background: linear-gradient(90deg, rgba($color: #3a7e32, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgba(37, 176, 19, 1);
    border-left: 2px solid rgba(37, 176, 19, 1);
}

.listbg1 {
    background: linear-gradient(90deg, rgba($color: #F03232, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgba(240, 50, 50, 1);
    border-left: 2px solid rgba(240, 50, 50, 1);
}

.listbg2 {
    background: linear-gradient(90deg, rgba($color: #D8722F, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgba(224, 117, 46, 1);
    border-left: 2px solid rgba(224, 117, 46, 1);
}

.listbg3 {
    color: rgba(173, 173, 173, 1);
    background: linear-gradient(90deg, rgba($color: #ADADAD, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    border-left: 2px solid rgba(173, 173, 173, 1);
}

.listbgc {
    background: linear-gradient(180deg, #24293F, #234383);
    border-radius: 5px;
    // border: 1px solid;
    // opacity: 0.6;
    // border-image: linear-gradient(0deg, #4583FF, #0B3556) 10 10;
}

.listbgc1 {
    border-radius: 5px;
    background-color: rgba(41, 46, 72, 0.6);
}
</style>
